<template>
  <div>
    <div class="m-anthor">
      <button @click="hiddenTab('新建')">隐藏标签</button>
      <button @click="hiddenTab('开发完成')">隐藏标签2</button>
      <button @click="hiddenTab('新建', true)">显示标签</button>
      <button @click="hiddenTab('开发完成', true)">显示标签2</button>

      <t-tabs
        ref="myTabs"
        class="tr-tabs-level1"
        :staticItems="list"
        tabPosition="top"
        type="none"
        :visible="true"
        fillMarginBottom="20px"
        :hideTabLabel="false"
        :hideTabPanel="false"
        tabIndex="0"
        style="margin-top: 0px"
        v-model="index"
        visibleSeparator
      >
        <t-tab-panel name="111">
          <t-tabs
            class="tr-tabs-level2 tr-tabs-padding-normal"
            :staticItems="list"
            tabPosition="top"
            type="none"
            fillMode="fixedHeight"
            height="150px"
            :visible="true"
            fillMarginBottom="20px"
            :hideTabLabel="false"
            :hideTabPanel="false"
            tabIndex="0"
            activeColor="#039"
            style="margin-top: 0px"
            v-model="index"
          >
            <t-tab-panel name="111">
              <t-tabs
                class="tr-tabs-level3"
                :staticItems="list"
                tabPosition="top"
                type="none"
                fillMode="fixedHeight"
                height="150px"
                :visible="true"
                fillMarginBottom="20px"
                :hideTabLabel="false"
                :hideTabPanel="false"
                tabIndex="0"
                activeColor="#039"
                style="margin-top: 0px"
                v-model="index"
              >
                <t-tab-panel name="111">
                  <t-tabs
                    class="tr-tabs-level1"
                    :staticItems="list"
                    tabPosition="top"
                    type="none"
                    fillMode="fixedHeight"
                    height="150px"
                    :visible="true"
                    fillMarginBottom="20px"
                    :hideTabLabel="false"
                    :hideTabPanel="false"
                    tabIndex="0"
                    activeColor="#039"
                    style="margin-top: 0px"
                    v-model="index"
                    forcedPc
                  >
                    <t-tab-panel name="111">标签1内容</t-tab-panel>
                    <t-tab-panel name="222">标签2内容</t-tab-panel>
                    <t-tab-panel name="333">标签3内容</t-tab-panel>
                  </t-tabs></t-tab-panel
                >
                <t-tab-panel name="222">标签2内容</t-tab-panel>
                <t-tab-panel name="333">标签3内容</t-tab-panel>
              </t-tabs></t-tab-panel
            >
            <t-tab-panel name="222">标签2内容</t-tab-panel>
            <t-tab-panel name="333">标签3内容</t-tab-panel>
          </t-tabs></t-tab-panel
        >
        <t-tab-panel name="222">标签2内容</t-tab-panel>
        <t-tab-panel name="333">标签3内容</t-tab-panel>
      </t-tabs>

      <t-tabs
        class="tr-tabs-level3 tr-tabs-padding-normal"
        :staticItems="list"
        tabPosition="left"
        type="none"
        fillMode="fixedHeight"
        height="150px"
        :visible="true"
        fillMarginBottom="20px"
        :hideTabLabel="false"
        :hideTabPanel="false"
        tabIndex="0"
        activeColor="#039"
        style="margin-top: 0px"
        v-model="index"
      >
        <t-tab-panel name="111">标签1fewafawef内容</t-tab-panel>
        <t-tab-panel name="222">标签2内容</t-tab-panel>
        <t-tab-panel name="333">标签3内容</t-tab-panel>
      </t-tabs>

      <t-tabs
        class="tr-tabs-level1"
        :staticItems="list"
        tabPosition="left"
        type="none"
        fillMode="fixedHeight"
        height="150px"
        :visible="true"
        fillMarginBottom="20px"
        :hideTabLabel="false"
        :hideTabPanel="false"
        tabIndex="0"
        activeColor="#039"
        style="margin-top: 0px"
        v-model="index"
      >
        <t-tab-panel name="111">标签1内容</t-tab-panel>
        <t-tab-panel name="222">标签2内容</t-tab-panel>
        <t-tab-panel name="333">标签3内容</t-tab-panel>
      </t-tabs>

      <t-tabs
        class="tr-tabs-level2"
        :staticItems="list"
        tabPosition="left"
        type="none"
        fillMode="fixedHeight"
        height="150px"
        :visible="true"
        fillMarginBottom="20px"
        :hideTabLabel="false"
        :hideTabPanel="false"
        tabIndex="0"
        activeColor="#039"
        style="margin-top: 0px"
        v-model="index"
        visibleSeparator
      >
        <t-tab-panel name="111">标签1内容</t-tab-panel>
        <t-tab-panel name="222">标签2内容</t-tab-panel>
        <t-tab-panel name="333">标签3内容</t-tab-panel>
      </t-tabs>

      <t-tabs
        :staticItems="list"
        tabPosition="left"
        type="bordered"
        fillMode="none"
        height="250px"
        :visible="true"
        fillMarginBottom="20px"
        :hideTabLabel="false"
        tabIndex="0"
        activeColor="#f33"
        style="margin-top: 50px"
      >
        <t-tab-panel name="111">标签1内容</t-tab-panel>
        <t-tab-panel name="222">标签2内容</t-tab-panel>
        <t-tab-panel name="333">标签3内容</t-tab-panel>
      </t-tabs>

      <t-tabs
        :staticItems="list"
        tabPosition="right"
        type="shadow"
        fillMode="fixedHeight"
        height="350px"
        :visible="true"
        fillMarginBottom="20px"
        :hideTabLabel="false"
        tabIndex="0"
        activeColor="#f33"
        style="margin-top: 50px"
      >
        <t-tab-panel name="111">标签1内容</t-tab-panel>
        <t-tab-panel name="222">标签2内容</t-tab-panel>
        <t-tab-panel name="333">标签3内容</t-tab-panel>
      </t-tabs>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, nextTick } from 'vue';

const showed = ref(false);

const list = [
  {
    label: '新建',
    code: '111',
    icon: 'star',
  },
  {
    label: '编辑',
    code: '222',
  },
  {
    label: '开发完成',
    code: '333',
  },
  // {
  //   label: '开发完成',
  //   code: '333',
  // },
  // {
  //   label: '开发完成',
  //   code: '333',
  // },
  // {
  //   label: '开发完成',
  //   code: '333',
  // },
  // {
  //   label: '开发完成',
  //   code: '333',
  // },
  // {
  //   label: '开发完成',
  //   code: '333',
  // },
  // {
  //   label: '开发完成',
  //   code: '333',
  // },
];

// let tab1 = ref(null);
let Widget = { tab1: null };

const index = ref(1);

async function showTab1Index() {
  showed.value = true;
  await nextTick();
  cpts.tab1.changeTabLabel('333', '我靠靠靠');
}

const myTabs = ref(null);
function hiddenTab(label, bool = false) {
  myTabs.value.setTabVisible({ label }, bool);
}

function onChange() {
  console.log('onchange');
}

onMounted(() => {
  // cpts.tab1 = tab1.value;
  // page.value = document.querySelector('.content._content_p0zap_11');
});
</script>

<style lang="scss" scoped>
.g-cnt {
  padding: 0 150px;
}

.m-anthor {
}

.m-list {
  margin-top: 50px;
  height: 800px;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-size: 100px;
}
</style>
